<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缩略图</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<!--
     缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网络系统一起使用。
  同时话可以让缩略图配合标题、描述内容，按钮等。
-->
<body>
<div class="container">
  <div class="row">
    <!--缩略图-->
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="picture/林俊杰.webp" style="width: 240px; height:360px;">
        <h3>林俊杰</h3>
        <p>林俊杰歌手,代表作《背对背拥抱》、《曹操》、《当你》 作品 1亿关注 15亿粉丝 59843123微博 歌手</p>
        <button class="btn btn-default" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="alert('评价你妈评价林俊杰是你能评价的？？？')">
          <span class="glyphicon glyphicon glyphicon-pencil"></span> 评论
        </button>
      </div>
    </div>
    <!--缩略图-->
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="picture/邓紫棋.webp" style="width: 240px; height:360px;">
        <h3>邓紫棋</h3>
        <p>歌手、词曲作者、音乐制作人 1991年8月16日(农历：辛未羊年七月初七) 邓紫棋（G.E.M.）</p>
        <button class="btn btn-default" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="alert('评价你妈评价邓紫棋是你能评价的？？？')">
          <span class="glyphicon glyphicon glyphicon-pencil"></span> 评论
        </button>
      </div>
    </div>
    <!--缩略图-->
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="picture/周杰伦.webp" style="width: 240px; height:360px;">
        <h3>周杰伦</h3>
        <p>周杰伦 单曲:1596 专辑:37 MV:500 粉丝:142.5W英文名:Jay Chou 国籍:中国台湾</p>
        <button class="btn btn-default"onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="alert('评价你妈评价周杰伦是你能评价的？？？')">
          <span class="glyphicon glyphicon glyphicon-pencil"></span> 评论
        </button>
      </div>
    </div>
    <!--缩略图-->
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="picture/张博文的最爱.png" style="width: 240px; height:360px;">
        <h3>玩偶姐姐</h3>
        <p>代表作《森林》《一日女友》《海岛生活》推特粉丝:3百多w 微博粉丝:3百多W 推特粉丝:3百多w    </p>
        <button class="btn btn-default" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info"  onclick="alert('这个可以评价...')">
          <span class="glyphicon glyphicon-pencil"></span> 评论
        </button>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="thumbnail">
        <img src="picture/张博文的最爱.png" style="width: 100%;height: 360px">
        <h3>玩偶姐姐</h3>
        <p>代表作《森林》《一日女友》《海岛生活》推特粉丝:3百多w 微博粉丝:3百多W 推特粉丝:3百多w    </p>
        <button class="btn btn-default" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="pingjiachenggong()">
          <span class="glyphicon glyphicon-pencil"></span> 评价
        </button>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="thumbnail">
        <img src="picture/周杰伦.webp" style="width: 100%;height: 360px">
        <h3>周杰伦</h3>
        <p>周杰伦 单曲:1596 专辑:37 MV:500 粉丝:142.5W英文名:Jay Chou 国籍:中国台湾</p>
        <button class="btn btn-default" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="pingjiachenggong()">
          <span class="glyphicon glyphicon-pencil"></span> 评价
        </button>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="thumbnail">
        <img src="picture/邓紫棋.webp" style="width: 100%;height: 360px">
        <h3>邓紫棋</h3>
        <p>歌手、词曲作者、音乐制作人 1991年8月16日(农历：辛未羊年七月初七) 邓紫棋（G.E.M.）</p>
        <button class="btn btn-default" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="pingjiachenggong()">
          <span class="glyphicon glyphicon-pencil"></span> 评价
        </button>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="thumbnail">
        <img src="picture/林俊杰.webp" style="width: 100%;height: 360px">
        <h3>林俊杰</h3>
        <p>林俊杰歌手,代表作《背对背拥抱》、《曹操》、《当你》 作品 1亿关注 15亿粉丝 59843123微博 歌手</p>
        <button class="btn btn-default" onclick="pingjiachenggong()">
          <span class="glyphicon glyphicon-heart"></span> 喜欢
        </button>
        <button class="btn btn-info" onclick="shoucangchenggong()">
          <span class="glyphicon glyphicon-pencil"></span> 评价
        </button>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  function shoucangchenggong() {
    alert("收藏成功");
  }
  function pingjiachenggong() {
    alert("评价成功");
  }
</script>
</html>
